<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>知识库管理</title>
    <style>
        body { font-family: -apple-system, sans-serif; background-color: #f4f4f8; margin: 0; padding: 20px; }
        .container { width: 90%; max-width: 900px; margin: auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; margin-bottom: 20px; }
        .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .btn { padding: 10px 18px; border-radius: 5px; text-decoration: none; color: white; font-weight: bold; transition: background-color 0.3s; }
        .btn-primary { background-color: #007bff; }
        .btn-primary:hover { background-color: #0056b3; }
        .btn-secondary { background-color: #6c757d; }
        .btn-secondary:hover { background-color: #5a6268; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #f2f2f2; }
        .actions a, .actions button { margin-right: 8px; text-decoration: none; color: #007bff; background: none; border: 1px solid #007bff; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
        .actions .delete-btn { color: #dc3545; border-color: #dc3545; }
        .flash-messages { list-style: none; padding: 0; margin-bottom: 20px; }
        .flash-messages li { padding: 15px; border-radius: 5px; margin-bottom: 10px; }
        .flash-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .flash-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>
<div class="container">
    <h1>知识库管理</h1>
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <ul class="flash-messages">
        {% for category, message in messages %}
          <li class="flash-{{ category }}">{{ message }}</li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}
    <div class="toolbar">
        <a href="{{ url_for('index') }}" class="btn btn-secondary">返回聊天机器人</a>
        <a href="{{ url_for('add_product') }}" class="btn btn-primary">添加新知识</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>分类</th>
                <th width="150px">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for product in products %}
            <tr>
                <td>{{ product['id'] }}</td>
                <td>{{ product['name'] }}</td>
                <td>{{ product['category'] }}</td>
                <td class="actions">
                    <a href="{{ url_for('edit_product', product_id=product['id']) }}">编辑</a>
                    <form action="{{ url_for('delete_product', product_id=product['id']) }}" method="post" style="display:inline;">
                        <button type="submit" class="delete-btn" onclick="return confirm('您确定要删除此条知识吗？此操作不可撤销。');">删除</button>
                    </form>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="4" style="text-align: center;">知识库中还没有任何内容。</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
</body>
</html>